// ---------------------- 获取分类，渲染到下拉框的位置 ------------------
let form = layui.form
$.ajax({
    url: '/my/category/list',
    success: function (res) {
        let html = ''
        res.data.forEach(function (val) {
            html += `<option value="${val.id}">${val.name}</option>`
        })
        
        $('#add').append(html)
        // 更新渲染
        form.render('select');
    }
})



// --------------------------------------------调用富文本--------------------------------------
initEditor()




// ----------------------------------- 处理封面图片 ----------------------------------
// 1. 初始化剪裁框
let img = $('#image')
// 1.2) 裁剪选项
let options = {
    // 宽高比
    aspectRatio: 400 / 280,
    // 预览区
    preview:'.img-preview'
}
// 1.3) 初始化裁剪区域
img.cropper(options)

// 点击按钮是能选择图片
$('#b1').on('click', function () {
    $('#file').trigger('click')
})

// 当选择了图片的时候，改变文本框的图片
$('#file').on('change', function () {     //change表示  当元素的值发生改变时添加
    if (this.files.length > 0) {
        let imgobj = this.files[0]   //获取第一张图片
        let url = URL.createObjectURL(imgobj);    //创建url
        // 更换图片(先销毁 -- 再替换图片 -- 再创建图片)
        img.cropper('destroy').attr('src',url).cropper(options)
    }
})





// --------------------------  完成最终的添加文章 ----------------------------
$('form').on('submit', function (e) {
    e.preventDefault()
    //因为有文件上传 收集表单数据(必须是FormData)
    let fd = new FormData(this)

    // 处理内容，通过富文本编辑器的语法，获取编辑器的内存。并把内容添加到fd对象中
    fd.set('content', tinyMCE.activeEditor.getContent())
    
    // 处理封面图片(剪裁图片，吧图片装换成文件对象，最后追加到fd对象中)
    let canvas = img.cropper('getCroppedCanvas', { width: 400, height: 280 })
    canvas.toBlob(function (blob) {
        //形参blob 是blob对象，追加到fd中，就会变成文件对象
        fd.append('cover_img', blob)
        

        // ajax数据提交
        $.ajax({
            url: '/my/article/add',
            type: 'post',
            data: fd,
            success: function (res) {
                console.log( res);
                layer.msg(res.message)
                location.href = './article2.html'
            },
            processData: false, // 不要处理数据；意思是不要把对象形式的fd转换成查询字符串形式
            contentType: false,// 不要加默认的请求头（application/x-www-form-urlencoded），让浏览器自行设置请求头
            
        })




        // 测试，看fd中有哪些值
        // fd.forEach(function (value, key) {
        // console.log(value, key);
        // })


    })
})